<template>
  <div>
    <Upload 
      accept=".jpg"
      :max-size="5120" 
      name="files"
      :on-exceeded-size="exceededSize" 
      :headers="headerUpload"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :action="uploadUrl">
      <Button icon="ios-cloud-upload-outline">选择文件</Button>
    </Upload>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  props: {
    imgUrl: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleSuccess (res, file, fileList) {
      this.$emit('update:imgUrl', res.data)
    },
    handleRemove() {
      this.$emit('update:imgUrl', '')
    },
    exceededSize() {
      this.$Message.error('文件不可超过5MB');
    }
  },
  computed: {
    uploadUrl: () => {
      return `${process.env.BASE_URL}file/upload1`
    },
    headerUpload: () => {
      const data = {}
      data.TOKEN = getToken()
      return data
    },
  },
}
</script>

<style>

</style>